<template>
  <div class="home">
    <!-- <hong-form
      v-model="form"
      :options="formOptions"
      :dicList="dicList"></hong-form> -->
      <hong-tabs-form
        ref="tabsForm"
        :value="form"
        :options="navOptions"
        :formOptions="formOptions"
        isField
        :checkList="checkList"
        :disabled="disabled"
        :dicList="dicList"
        @init="handleInit">
        <template slot="channelNameForm">
          <div style="width: 100%; height: 30px;background: rgba(255, 0, 0, .5);color: #fff;line-height: 30px;text-align: center; border-radius: 10px;">
            自定义组件
          </div>
        </template>
        <template slot="nameForm" slot-scope="scope">
          <hong-input
            v-model="scope.$form[scope.$options.name]"></hong-input>
        </template>
        <template slot="footer">
          <md-button v-if="!disabled" type="primary" @click="handleSave(false)">保存</md-button>
        </template>
      </hong-tabs-form>
  </div>
</template>

<script>
// @ is an alias to /src
import { uploadFile, downloadFileUrl } from '@/api/common'
const validator = (value, callback) => {
  if (!value) {
    return 'validator 不能为空'
  }
}
export default {
  name: 'home',
  components: {
  },
  data () {
    return {
      form: {
        basic: {
        }
      },
      dicList: {},
      disabled: false,
      checkList: [
        { name: 'isElecSign', label: '特殊标记' }
      ],
      navOptions: {
        isAdd: true,
        max: 3,
        active: 'basic',
        items: [
          { name: 'basic', label: '基本信息' },
          { name: 'main', label: '借款人信息' },
          { name: 'relation', label: '关系人', closable: true, column: [] }
        ]
      },
      formOptions: {
        basic: {
          disabled: false,
          items: [
            {
              label: '证件到期日期',
              name: 'percerdt',
              type: 'date',
              dateType: 'custom',
              customTypes: ['yyyy', 'MM'],
              format: 'yyyyMM',
              brief: '我是姓名',
              mark: ['isElecSign'],
              rules: [
                { required: true, message: '' }
              ]
            },
            {
              label: '卡分期产品名称',
              name: 'productDetailCode',
              type: 'select',
              multiple: true,
              tag: true,
              dicData: [
                { label: 'select01', value: '01' },
                { label: 'select02', value: '02' },
                { label: 'select03', value: '03' },
                { label: 'select04', value: '04' },
                { label: 'select05', value: '05' },
                { label: 'select06', value: '06' },
                { label: 'select07', value: '07' },
                { label: 'select08', value: '08' },
                { label: 'select09', value: '09' },
                { label: 'select10', value: '10' }
              ],
              solid: false,
              brief: '我是姓名',
              rules: [
                { required: true, message: '请选择卡分期名称' }
              ]
            },
            {
              label: 'validator',
              name: 'validator',
              type: 'input',
              rules: [
                { validator: validator }
              ]
            },
            {
              label: '贷款银行',
              name: 'bank',
              type: 'picker',
              align: 'left',
              dicUrl: 'app-api/order/pre/01',
              props: {
                label: 'value',
                value: 'code'
              },
              dicFormat (data) {
                console.log(data)
                return data.fieldParam.loanBank
              },
              rules: [
                { required: true, message: '' }
              ]
            },
            {
              label: '渠道名称',
              name: 'channelName',
              type: 'picker',
              value: '01',
              // dicUrl: '/chan/component/dict/chan',
              formslot: true,
              brief: '我来测试了',
              dicMethod: 'post',
              dicParams: {},
              props: {
                label: 'label',
                value: 'label'
              },
              rules: [
                { required: true, message: '' }
              ],
              change ({ value, options, form, vue, selectItem }) {
              }
            },
            {
              label: '紧急联系人',
              type: 'multi-record',
              name: 'contact',
              value: [
                { name: '高木', age: '98' },
                { name: '高林', age: '88' },
                { name: '高森', age: '78' }
              ],
              items: [
                {
                  label: '姓名',
                  name: 'name',
                  type: 'input',
                  mark: ['isElecSign', 'isFaceSign'],
                  rules: [
                    { required: true, message: '' }
                  ]
                },
                {
                  label: '年龄',
                  name: 'age',
                  type: 'input',
                  rules: [
                    { required: true, message: '' }
                  ]
                }
              ]
            },
            {
              label: '我是按钮',
              type: 'button',
              buttonType: 'primary',
              round: false,
              disabled: false,
              loading: true,
              click ({ options, form, loading }) {
                setTimeout(() => {
                  loading()
                }, 2000)
              }
            }
          ]
        },
        main: {
          disabled: false,
          items: [
            {
              label: '上传照片后自动识别身份信息（识别后请人工校对）',
              type: 'caption'
            },
            {
              label: '身份证人像面',
              name: 'sfzPositive',
              type: 'upload',
              custom: 'idcard-front',
              capture: 'all',
              download: {
                url: downloadFileUrl,
                param: 'fileId'
              },
              upload: {
                method: uploadFile,
                param: 'file',
                prop: 'id'
              },
              rules: [
                { required: true, message: '请上传身份证正面' }
              ]
            },
            {
              label: '身份证国徽面',
              name: 'sfzOther',
              type: 'upload',
              custom: 'idcard-back',
              capture: 'all',
              rules: [
                { required: true, message: '请上传身份证反面' }
              ]
            },
            {
              label: '姓名',
              name: 'name',
              type: 'textarea',
              formslot: true,
              append: '万元',
              virtualKeyboard: true,
              virtualKeyboardOkText: '支付',
              mark: ['isElecSign', 'isFaceSign'],
              rules: [
                { required: true, message: '' }
              ]
            },
            {
              label: '年龄',
              name: 'age',
              type: 'input',
              rules: [
                { required: true, message: '' }
              ]
            },
            {
              label: '婚姻状况',
              name: 'permrtst',
              type: 'picker',
              dic: 'marital_status',
              mark: ['isElecSign'],
              // dicUrl: '/yw25qpi/getmarray',
              // dicMethod: '',
              rules: [
                { required: true, message: '' }
              ]
            },
            {
              label: '移动电话',
              name: 'realpermblno',
              type: 'input',
              mark: ['isElecSign', 'isFaceSign'],
              rules: [
                { required: true, message: '' }
              ]
            },
            {
              label: '证件类型',
              name: 'certy',
              type: 'picker',
              dic: 'document_type',
              value: '01',
              mark: ['isElecSign'],
              rules: [
                { required: true, message: '' }
              ]
            },
            {
              label: '证件号码',
              name: 'cerno',
              type: 'input',
              mark: ['isElecSign', 'isFaceSign'],
              rules: [
                { required: true, message: '' }
              ]
            },
            {
              label: '证件到期日期',
              name: 'percerdt',
              type: 'date',
              format: 'yyyyMMdd',
              brief: '我是姓名',
              mark: ['isElecSign'],
              rules: [
                { required: true, message: '' }
              ]
            },
            {
              label: '发证机关',
              name: 'percerop',
              type: 'input',
              rules: [
                { required: true, message: '' }
              ]
            },
            {
              label: '征信授权书',
              name: 'authLetterPic',
              type: 'upload'
            },
            {
              label: '授权书签字照',
              name: 'authSignPic',
              type: 'upload'
            },
            {
              label: '客户正脸照',
              name: 'customerFacePic',
              type: 'upload'
            },
            {
              label: '汽车品牌',
              name: 'brandid',
              type: 'picker',
              cascaderItem: 'cartypeid',
              dicUrl: 'vsbms/getCarBrd',
              props: {
                label: 'brdName',
                value: 'brdKey'
              },
              solid: false,
              rules: [
                { required: true }
              ]
            },
            {
              label: '汽车系列',
              name: 'cartypeid',
              type: 'picker',
              cascaderItem: 'carModelId',
              dicUrl: 'vsbms/getCartyp?brdKey={{key}}',
              props: {
                label: 'typName',
                value: 'typKey'
              },
              solid: false,
              rules: [
                { required: true }
              ]
            },
            {
              label: '汽车车型',
              name: 'carModelId',
              type: 'picker',
              dicUrl: 'vsbms/getCarMod?typKey={{key}}',
              props: {
                label: 'modName',
                value: 'modKey'
              },
              solid: false,
              rules: [
                { required: true }
              ]
            }
          ]
        },
        relation: {
          disabled: false,
          items: [
            {
              label: '上传照片后自动识别身份信息（识别后请人工校对）',
              type: 'caption'
            },
            {
              label: '身份证人像面',
              name: 'sfzPositive',
              type: 'upload',
              custom: 'idcard-front',
              capture: 'all',
              rules: [
                { required: true, message: '请上传身份证正面' }
              ]
            },
            {
              label: '身份证国徽面',
              name: 'sfzOther',
              type: 'upload',
              custom: 'idcard-back',
              capture: 'all',
              rules: [
                { required: true, message: '请上传身份证反面' }
              ]
            },
            {
              label: '姓名',
              name: 'name',
              type: 'input',
              rules: [
                { required: true, message: '' }
              ]
            },
            {
              label: '年龄',
              name: 'age',
              type: 'input',
              rules: [
                { required: true, message: '' }
              ]
            },
            {
              label: '婚姻状况',
              name: 'permrtst',
              type: 'picker',
              dic: 'marital_status',
              rules: [
                { required: true, message: '' }
              ]
            },
            {
              label: '移动电话',
              name: 'realpermblno',
              type: 'input',
              rules: [
                { required: true, message: '' }
              ]
            },
            {
              label: '证件类型',
              name: 'certy',
              type: 'picker',
              dic: 'document_type',
              value: '01',
              rules: [
                { required: true, message: '' }
              ]
            },
            {
              label: '证件号码',
              name: 'cerno',
              type: 'input',
              rules: [
                { required: true, message: '' }
              ]
            },
            {
              label: '证件到期日期',
              name: 'percerdt',
              type: 'date',
              format: 'yyyyMMdd',
              rules: [
                { required: true, message: '' }
              ]
            },
            {
              label: '发证机关',
              name: 'percerop',
              type: 'input',
              rules: [
                { required: true, message: '' }
              ]
            },
            {
              label: '与主贷人社会关系',
              name: 'relationType',
              type: 'picker',
              dic: 'relationApp',
              rules: [
                { required: true, message: '' }
              ]
            },
            {
              label: '征信授权书',
              name: 'authLetterPic',
              type: 'upload'
            },
            {
              label: '授权书签字照',
              name: 'authSignPic',
              type: 'upload'
            },
            {
              label: '客户正脸照',
              name: 'customerFacePic',
              type: 'upload'
            }
          ]
        }
      }
    }
  },
  methods: {
    handleSave () {
      console.log(this.$refs.tabsForm.realData)
      this.$refs.tabsForm.valid().then(() => {
        console.log('valid success~')
      }).catch(__ => {
        this.$toast.failed(__)
      })
    },
    handleInit ({ dicTypes }) {
      setTimeout(() => {
        dicTypes.forEach(dic => {
          this.$set(this.dicList, dic, [
            {
              label: dic,
              value: dic
            }
          ])
        })
      }, 500)
    }
  }
}
</script>
<style lang="stylus" scoped>
  .home
    height 100%
</style>
